<template>
    <div id="store-shop">
        <div class="content">
            <div class="shop-head">
                这是头部
            </div>
            <div class="shop-bottom">
                <tab-control :tab-list="tabList" tab-index="0" tab-type="1" active-color="#FFD161" default-color="#000">
                    <!--商品列表-->
                    <div slot="dishes">
                        <div class="goods">
                            <div class="menu-box" v-el:menu-box>
                                <ul>
                                    <li class="vmc-1px-bottom" v-for="item in goods" :class="{'current':currentIndex===$index}" @click="selectMenu($index,$event)">
                                        <span>{{item.name}}</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="foods-box" v-el:foods-box>
                                <ul>
                                    <li class="food-list vmc-1px-bottom" v-for="item in goods">
                                        <span class="food-title">{{item.name}}</span>
                                        <div class="food-tiem vmc-1px-bottom" v-for="food in item.foods">
                                            <div class="food-img">
                                                <img :src="food.icon" alt="">
                                            </div>
                                            <div class="food-content">
                                                <div class="food-name">
                                                    {{food.name}}
                                                </div>
                                                <div class="desc">
                                                    {{food.description}}
                                                </div>
                                                <div class="extra">
                                                    <span class="sales">月售{{food.sellCount}}</span>
                                                    <span class="good">赞{{food.rating}}</span>
                                                </div>
                                                <div class="pric-box">
                                                    <div class="pric">
                                                        ￥<span>{{food.price}}</span>
                                                    </div>
                                                    <div class="cartcontrol-box">
                                                        这是数量加减
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!--商品评论-->
                    <div slot="evaluate">
                        <div class="ratings">

                        </div>
                    </div>
                    <!--商家信息-->
                    <div slot="merchant">
                        <p v-for="i in 100">tab3 内容云云</p>
                    </div>
                </tab-control>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import {TabControl} from 'vmc';

    export default {
        components: {
            TabControl
        },
        methods: {
            selectMenu(index, event) {
                if (!event._constructed) {
                    return
                }
                let foodList = this.$els.foodsBox.getElementsByClassName('food-list');
                let el = foodList[index];
                this.foodsScroll.scrollToElement(el, 300)
            },
            selectFood(food, event) {
                if (!event._constructed) {
                    return
                }
                this.selectFood = food;
//                this.$refs.food.show();
            },
            _initScroll() {
                this.meunScroll = new BScroll(this.$els.menuBox, {
                    click: true,
                });
                this.foodsScroll = new BScroll(this.$els.foodsBox, {
                    click: true,
                    probeType: 3
                });

                this.foodsScroll.on('scroll', (pos) => {
                    this.scrollY = Math.abs(Math.round(pos.y));
                })
            },
            _calculateHeight() {
                let foodList = this.$els.foodsBox.getElementsByClassName('food-list');
                let height = 0;
                this.listHeight.push(height);
                for (let i = 0; i < foodList.length; i++) {
                    let item = foodList[i];
                    height += item.clientHeight;
                    this.listHeight.push(height);
                }
            }
        },
        data() {
            return {
                tabList: [
                    {
                        title: '点菜',
                        name: 'dishes'
                    },
                    {
                        title: '评价',
                        name: 'evaluate'
                    },
                    {
                        title: '商家',
                        name: 'merchant'
                    }
                ],
                goods: [],
                listHeight: [],
                scrollY: 0,
                selectedFood: {}
            }
        },
        computed: {
            currentIndex() {
                for (let i = 0; i < this.listHeight.length; i++) {
                    let height1 = this.listHeight[i];
                    let height2 = this.listHeight[i + 1];

                    if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
                        return i;
                    }
                }
                return 0;
            },
            selectFoods() {
                let foods = [];
                this.goods.forEach((good) => {
                    good.foods.forEach((food) => {
                        if (food.count) {
                            foods.push(food);
                        }
                    });
                });
                return foods;
            }
        },

        ready() {
            this.$http.get('/api/goods')
                .then((res) => {
                    this.goods = res.data.data;
                    this.$nextTick(() => {
                        this._initScroll();
                        this._calculateHeight();
                    })
                })
        }
    }
</script>

<style rel="stylesheet/less" lang="less">
    #store-shop {
        .content {
            height: 100%;
            overflow: auto;
            box-sizing: border-box;

            .shop-head {
                width: 100%;
                height: 25%;
                background: red;
            }
            .shop-bottom {
                width: 100%;
                height: 75%;

                div[slot='dishes'] {
                    height: 100%;

                    .goods {
                        display: flex;
                        width: 100%;
                        height: 100%;
                        .menu-box {
                            width: 85px;
                            background: #EFEFEF;
                            height: 100%;
                            overflow: auto;
                            box-sizing: border-box;

                            ul {
                                font-size: 12px;

                                li {
                                    display: table;
                                    padding: 0 15px;
                                    height: 60px;
                                    width: 100%;
                                    box-sizing: border-box;

                                    &.current {
                                        background: #ffffff;
                                    }

                                    span {
                                        display: table-cell;
                                        width: 50px;
                                        vertical-align: middle;
                                    }
                                }
                            }
                        }

                        .foods-box {
                            flex: 1;
                            background: #ffffff;

                            .food-list {

                                .food-title {
                                    display: block;
                                    padding-left: 14px;
                                    height: 25px;
                                    line-height: 25px;
                                    font-size: 12px;
                                    color: #666666;
                                    background: #F7F7F7;
                                }
                                .food-tiem {
                                    display: flex;
                                    margin: 18px;
                                    padding-bottom: 18px;
                                    font-size: 12px;

                                    &:last-child {
                                        margin-bottom: 0;
                                    }

                                    .food-img {
                                        margin-right: 10px;
                                        width: 65px;
                                        height: 65px;

                                        img {
                                            width: 100%;
                                            display: block;
                                            border-radius: 2px;
                                        }
                                    }

                                    .food-content {
                                        flex: 1;
                                        color: #999999;

                                        .food-name {
                                            font-size: 14px;
                                            font-weight: bold;
                                            color: #333333;
                                            margin-bottom: 5px;
                                        }
                                        .desc {
                                            margin-bottom: 5px;
                                        }
                                        .extra {
                                            margin-bottom: 12px;
                                            .sales {
                                                margin-right: 5px;
                                            }
                                        }
                                        .pric-box {
                                            position: relative;

                                            .pric {

                                                span {
                                                    font-size: 14px;
                                                    font-weight: bold;
                                                    color: #FB4E44;
                                                }
                                            }
                                            .cartcontrol-box {
                                                position: absolute;
                                                right: 0;
                                                bottom: 0;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>